import React, {useState} from "react";
import {Button, Col, InputNumber, Row, Select,Input} from "antd";


function TimeBuilder()
{


    const [seconds, setSeconds] = useState(0);
    const [minutes, setMinutes] = useState(0);
    const [hours, setHours] = useState(0);
    const [days, setDays] = useState(0);
    const [months, setMonths] = useState(0);
    const [years, setYears] = useState(0);


    const handleSecondsChange = (value) => {
        setSeconds(value);
    };

    const handleMinutesChange = (value) => {
        setMinutes(value);
    };

    const handleHoursChange = (value) => {
        setHours(value);
    };

    const handleDaysChange = (value) => {
        setDays(value);
    };

    const handleMonthsChange = (value) => {
        setMonths(value);
    };

    const handleYearsChange = (value) => {
        setYears(value);
    };

    return (
        <>

            <Row justify={"center"} align={"middle"}>
                <Col span={3}>
                    当前选择:
                </Col>
                <Col span={20}>
                    <Input size={"middle"} />
                </Col>
            </Row>

            <Row style={{marginTop:16}} justify={"center"} align={"middle"}>
                <Col span={3} >
                    秒:
                </Col>
                <Col span={20}>
                    <Button type={"primary"} size={"middle"} onClick={() => handleSecondsChange(1)}>1</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleSecondsChange(5)}>5</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleSecondsChange(10)}>10</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleSecondsChange(50)}>50</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"}>自定义</Button>
                </Col>
            </Row>

            <Row style={{marginTop:16}} justify={"center"} align={"middle"}>
                <Col span={3}>
                    分:
                </Col>
                <Col span={20}>
                    <Button type={"primary"} size={"middle" } onClick={() => handleMinutesChange(1)}>1</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleMinutesChange(5)}>5</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleMinutesChange(10)}>10</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleMinutesChange(50)}>50</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"}>自定义</Button>
                </Col>
            </Row>

            <Row style={{marginTop:16}} justify={"center"} align={"middle"}>
                <Col span={3}>
                    时:
                </Col>
                <Col span={20}>
                    <Button type={"primary"} size={"middle"} onClick={() => handleHoursChange(1)}>1</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleHoursChange(4)}>4</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleHoursChange(12)}>12</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleHoursChange(24)}>24</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"}>自定义</Button>
                </Col>
            </Row>

            <Row style={{marginTop:16}} justify={"center"} align={"middle"}>
                <Col span={3}>
                    天:
                </Col>
                <Col span={20}>
                    <Button type={"primary"} size={"middle"} onClick={() => handleDaysChange(1)}>1</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleDaysChange(2)}>2</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleDaysChange(3)}>3</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleDaysChange(4)}>4</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"}>自定义</Button>
                </Col>
            </Row>
            <Row style={{marginTop:16}} justify={"center"} align={"middle"}>
                <Col span={3}>
                    月:
                </Col>
                <Col span={20}>
                    <Button type={"primary"} size={"middle"} onClick={() => handleMonthsChange(1)}>1</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleMonthsChange(2)}>2</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleMonthsChange(3)}>3</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleMonthsChange(4)}>4</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"}>自定义</Button>
                </Col>
            </Row>
            <Row style={{marginTop:16}} justify={"center"} align={"middle"}>
                <Col span={3}>
                    年:
                </Col>
                <Col span={20}>
                    <Button type={"primary"} size={"middle"} onClick={() => handleYearsChange(1)}>1</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleYearsChange(2)}>2</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleYearsChange(3)}>3</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"} onClick={() => handleYearsChange(4)}>4</Button>
                    <Button style={{marginLeft: "10px"}} type={"primary"} size={"middle"}>自定义</Button>
                </Col>
            </Row>
        </>
    )
}

export  default TimeBuilder
